<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        /*#imgbox img{
            width:100px;
        }*/
        .layui-table tr{
            hetght:52px;
        }
        .layui-table-cell{
            height:52px;
            /* 增加操作列的宽度，确保按钮能够完全显示 */
            white-space: normal;
        }
        /* 添加操作列的特殊样式 */
        .layui-table-tool-panel li .layui-btn {
            margin: 2px;
        }
        /* 确保操作列有足够宽度 */
        .layui-table-cell .layui-btn {
            margin: 2px;
            padding: 0 10px;
        }
    </style>
</head>
<body>
<table class="layui-table" lay-data="{url:'order/list1', page:true, id:'datalist',toolbar:'#toptools'}" lay-filter="datalist">
    <thead>
    <tr>
        <th lay-data="{field:'orderid'}">ID</th>
        <th lay-data="{field:'userid'}">商品ID</th>
        <th lay-data="{field:'money'}">价格</th>
        <th lay-data="{field:'addtime'}">生成时间</th>
        <th lay-data="{field:'paymenttime'}">支付时间</th>
        <th lay-data="{field:'deliverytime'}">邮递</th>
        <th lay-data="{field:'gettime'}">收货时间</th>
        <th lay-data="{field:'endtime'}">结束时间</th>
        <th lay-data="{templet:'#statusTPL'}">状态</th>
        <th lay-data="{field:'updatetime'}">更新时间</th>
        <!--<th lay-data="{field:'collecttime'}">收藏时间</th>-->
        <th lay-data="{toolbar:'#linetools',width:220,fixed:'right'}">操作</th>
    </tr>
    </thead>
</table>
<!--图片列自定义模板-->
<script type="text/html" id="imgTpl">
    <!--src属性中就要写上当前行的imgurl属性-->
    <img src="{{d.imgurl}}" style="height: 50px;width: 50px;">
</script>

<script type="text/html" id="statusTPL">
    {{# if(d.status==-1){ }}
    <span style="color:red;">已失效</span>
    {{# }else if(d.status==0){ }}
    <span style="">待付款</span>
    {{# }else if(d.status==1){ }}
    <span style="">待发货</span>
    {{# }else if(d.status==2){ }}
    <span style="">待收货</span>
    {{# }else if(d.status==3){ }}
    <span style="">已收货</span>
    {{# }else{ }}
    <span style="">已完成</span>
    {{# } }}
</script>

<!--父级分类自定义模板
<script type="text/html" id="parentTpl">
    {{# if(d.parentid==-1){ }}
    <span style="color:red;">顶级</span>
    {{# }else{ }}
    <span style="">{{ d.parent.name }}</span>
    {{# } }}
</script>-->
<!--新增数据表单-->
<div style="display:none" id="addWin" lay-filter="addWin" class="layui-form">
    <!--<div class="layui-form-item">
        <label class="layui-form-label">父级分类</label>
        <div class="layui-input-inline">
            <select name="parentid">
                <option value="-1">无父级分类</option>
            </select>
        </div>
    </div>-->

    <!--用户名-->
    <div class="layui-form-item">
        <label class="layui-form-label">UserID</label>
        <div class="layui-input-inline">
            <input type="text" name="userid" required lay-verify="required" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--数量-->
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="text" name="money" required lay-verify="required" placeholder="请输入订单金额" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <button type="button" lay-submit lay-filter="addsave" class="layui-btn" id="addsava">保存</button>
        <button type="button" class="layui-btn" id="addcancel">取消</button>
    </div>
</div>


<!--修改对话框-->
<div style="display:none" id="editWin" lay-filter="editWin" class="layui-form">
    <input name="orderid" type="hidden">
    <!--用户名-->
    <div class="layui-form-item">
        <label class="layui-form-label">UserID</label>
        <div class="layui-input-inline">
            <input type="text" name="userid" required lay-verify="required" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--数量-->
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="text" name="money" required lay-verify="required" placeholder="请输入订单金额" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="text" name="status" required lay-verify="required" placeholder="-1已失效||0未支付||1已支付||2已发货||3已收货||4已完成" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" lay-submit lay-filter="editsave" class="layui-btn" id="editsava">保存</button>
        <button type="button" class="layui-btn" id="editcancel">取消</button>
    </div>

</div>

<!-- ... 现有代码 ... -->
<script id="linetools" type="text/html">
    <div class="layui-btn-group">
    <button type="button" class="layui-btn" lay-event="edit">编辑</button>
    <button type="button" class="layui-btn" lay-event="delete">删除</button>
        <button type="button" class="layui-btn" lay-event="details">详情</button>
    {{# if(d.status == 1){ }}
    <button type="button" class="layui-btn layui-btn-normal" lay-event="deliver">发货</button>
    {{# } }}
    {{# if(d.status == 2){ }}
    <button type="button" class="layui-btn layui-btn-warm" lay-event="receive">收货</button>
    {{# } }}
    {{# if(d.status == 3){ }}
    <button type="button" class="layui-btn layui-btn-danger" lay-event="complete">完成</button>
    {{# } }}
    </div>
</script>
<!-- ... 现有代码 ... -->


<script id="toptools" type="text/html">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="text" placeholder="请输入查询内容" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-event="check">查询</button>
            <button type="button" class="layui-btn" lay-event="add">新增</button>
        </div>
    </div>
</script>
    <script src="layui/layui.all.js"></script>
    <script>
        const $=layui.$;
        const table=layui.table;
        const form=layui.form;
        const layer=layui.layer;
        const upload=layui.upload;

        table.on("tool(datalist)",function (obj){
            let event=obj.event;
            let data=obj.data;
            if(event=='delete'){
                layer.confirm("确认要删除吗?",function(){
                    deleteOrder(data.orderid);
                });
            }else if(event=='details'){
                viewOrderDetail(data.orderid);
            }
            else if(event=='edit'){
                form.val("editWin",data);
                layer.open({
                    type:1,
                    title:'编辑分类',
                    area:['400px','400px'],
                    content:$("#editWin"),
                });
            }else if(event=='deliver'){
                layer.confirm("确认要将订单标记为已发货吗?", function(){
                    updateOrderStatus(data.orderid, 2, "发货");
                });
            }else if(event=='receive'){
                layer.confirm("确认要将订单标记为已收货吗?", function(){
                    updateOrderStatus(data.orderid, 3, "收货");
                });
            }else if(event=='complete'){
                layer.confirm("确认要将订单标记为已完成吗?", function(){
                    updateOrderStatus(data.orderid, 4, "完成");
                });
            }
        });

        function viewOrderDetail(orderId) {
            // 跳转到订单详情页面
            window.location.href = `/system/orderdetails?orderid=${orderId}`;
        }

        function deleteOrder(orderId){
            $.ajax({
                url:'order/del',
                method:'post',
                data:{
                    orderid:orderId
                },
                success:function(){
                    layer.msg("删除成功",{time:1800,icon:1});
                    table.reload("datalist");
                },
                error:function(xhr) {
                    layer.msg("删除失败：" + xhr.responseText, {icon: 2});
                }
            });
        }
        // 添加更新订单状态的通用函数
        function updateOrderStatus(orderId, status, actionName) {
            $.ajax({
                url: 'order/change',
                method: 'POST',
                data: {
                    orderid: orderId,
                    status: status
                },
                success: function(result) {
                    layer.msg(actionName + "操作成功", {time: 1800, icon: 1});
                    table.reload("datalist");
                },
                error: function(xhr) {
                    layer.msg(actionName + "操作失败：" + xhr.responseText, {icon: 2});
                }
            });
        }


        // table.on("tool(datalist)",function (obj){
        //     let event=obj.event;
        //     //被点击按钮所在行的数据
        //     let data=obj.data;
        //     if(event=='delete'){
        //         layer.confirm("确认要删除吗?",function(){
        //             $.ajax({
        //                 url:'order/delete',
        //                 data:{id:data.orderid},
        //                 success:function(){
        //                     layer.msg("删除成功",{time:1800,icon:1});
        //                     table.reload("datalist");
        //                 },
        //                 error:function(xhr) {
        //                     layer.msg("删除失败：" + xhr.responseText, {icon: 2});
        //                 }
        //             });
        //         });
        //
        //     }else if(event=='edit'){
        //         //回显表单数据
        //         form.val("editWin",data);
        //         layer.open({
        //             type:1,
        //             title:'编辑分类',
        //             area:['400px','400px'],
        //             content:$("#editWin"),
        //         });
        //     }
        // });
        //查询出所有的一级分类,将一级分类的信息添加在下拉框中
       /* function getChildren(){
            $.ajax({
                url:"category/getchildren",
                data:{parentid:-1},
                async:false,
                success:function(result) {
                    console.log(result);
                    $("[name='parentid']").empty();
                    $("[name='parentid']").append("<option value='-1'>无父级分类</option>")
                    for (let i = 0; i < result.length; i++) {
                        $("[name='parentid']").append("<option value='" + result[i].cateid + "'>" + result[i].name + "</option>")
                    }
                    form.render('select');
                }
            });
        }*/

        table.on("toolbar(datalist)",function (obj){
            let event=obj.event;
            if(event=='add'){
                /*getChildren();*/
                $("[_id='addupload']").attr("src","easyfile/upload.jpeg");
                layer.open({
                   type:1,
                   title:'新增分类',
                   area:['400px','400px'],
                   content:$("#addWin")
                });


            }else if(event=='check'){
                //获取输入框中的数据
                let text=$("[name='text']").val();
                //发送到后端    layui表格加载
                table.reload("datalist",{where:{text:text},page:{curr:1}});

                $("[name='text']").val(text);
            }
        });
        //文件上传
        upload.render({
            elem:"[_id='addupload']",
            url:"file/upload",
            done:function(result){
                let url=result.data[0].src;
                $("[_id='addupload']").attr("src",url);
                $("[_id='addimgurl']").val(url);
            },
            error:function(){
                layer.msg("上传失败",{icon:2});
            }
        });

        //新增保存提交按钮
        form.on("submit(addsave)",function(data){
            console.log("--表单提交,并验证通过--");
            console.log(data);
            //发送ajax提交数据
            $.ajax({
               url:'order/add1',
               data:data.field,
               success:function(result){
                   //关闭掉本窗口
                   layer.closeAll();
                   //提示成功
                   layer.msg("添加成功",{icon:1,time:1800});
                   //刷新表格
                   table.reload("datalist");
               }
            });
            return false;
        });


        //编辑窗口的文件上传
        upload.render({
            elem:"[_id='editupload']",
            url:"file/upload",
            done:function(result){
                let url=result.data[0].src;
                $("[_id='editupload']").attr("src",url);
                $("[_id='editimgurl']").val(url);
            },
            error:function(){
                layer.msg("上传失败",{icon:2});
            }
        });


        form.on("submit(editsave)",function (data){
            //data.field    表单数据
            $.ajax({
                url:'order/change',
                data:data.field,
                success:function(result){
                    //关闭掉本窗口
                    layer.closeAll();
                    //提示成功
                    layer.msg("添加成功",{icon:1,time:1800});
                    //刷新表格
                    table.reload("datalist");
                },
                error:function(xhr){
                    layer.msg("修改失败: "+xhr.responseText,{icon:2});
                }
            })
            return false;
        })

        /*自定义表单验证规范*/
        form.verify({
            easyimg:function(value,item){
                //value     表单组件
                //item      对应的表单组件
                if(!value){
                    return "必须上传图片";
                }
            }
        });



    </script>
</body>
</html>